<template>
    <div class="TimePicker">
        <van-popup
            v-model="beginKey"
            position="bottom"
            :style="{ height: '40%' }"
            @close="cascaderclose"
        >
            <van-datetime-picker
                v-model="begincurrentDate"
                type="year-month"
                title="选择年月"
                :min-date="minDate"
                :max-date="maxDate"
                :formatter="beginformatter"
                @confirm="beginConfim"
                @cancel="cascaderclose"
                item-height="1.3rem"
                visible-item-count="10"
            />
        </van-popup>
    </div>
</template>

<script>
// import { axiosPost } from '../../axios';
// import { Toast } from 'vant';
export default {
    name: '',
    props: ['year', 'month'],
    data() {
        return {
            beginKey: true,
            begincurrentDate: this.year
                ? new Date(parseInt(this.year), parseInt(this.month), 0)
                : new Date(),
            minDate: new Date(1962, 0, 0),
            maxDate: new Date(),
        };
    },
    computed: {},
    mounted() {},
    methods: {
        beginformatter(type, val) {
            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`;
            }
            return val;
        },
        cascaderclose() {
            this.$emit('closeTimePciker', false);
        },
        beginConfim(val) {
            const add0 = (m) => {
                return m < 10 ? '0' + m : m;
            };
            const time = new Date(val);
            const y = time.getFullYear();
            const m = time.getMonth() + 1;

            this.beginKey = false;
            this.$emit('changeTime', {
                y: y,
                m: add0(m),
            });
        },
    },
};
</script>

<style lang="less" src="../assets/css/timePicker.less" scope></style>
